<!-- 库位管理 -->
<template>
    <div id="salesOrder">
        <!-- 响应式布局 -->
        <!--<el-row >  默认占满屏 一用就把左边的覆盖了，不知道为什么 -->
        <div style="width: 100%;height: 85px;background-color: #FAFAFA;padding-top: 1%;">
            <el-col :xs="3" :sm="2" :md="2" :lg="3" style="margin: 0 1% 0 1%">
                <el-input placeholder="客户代码" v-model="CustomerCode"></el-input>
            </el-col>
            <el-col :xs="3" :sm="2" :md="2" :lg="3" style="margin: 0 1% 0 1%">
                <el-input placeholder="客户订单号" v-model="OrderNumber"></el-input>
            </el-col>

            <el-col :xs="6" :sm="6" :md="6" :lg="4" style="text-align: left">
                <el-button type="primary" @click="selectTable">查询</el-button>
            </el-col>
        </div>
        <!-- max-height 600时就固定表头，显示滚动条  show-overflow-tooltip 表格内容多了可以显示一个提示框显示剩余内容   sortable排序 -->
        <el-table max-height="600" class="table_station" stripe border ref="multipleTable" :data="tableData"
                  tooltip-effect="dark"
                  style="width: 88%;text-align: center !important;">
            <el-table-column prop="index" sortable width="60"></el-table-column>
            <el-table-column prop="ID" sortable label="ID" v-if="false"></el-table-column>
            <el-table-column prop="SerialNumber" sortable label="订单流水号"></el-table-column>
            <el-table-column prop="OrderNumber" sortable label="客户订单号"></el-table-column>
            <el-table-column prop="SpecExplain" sortable label="物料规格说明"></el-table-column>
            <el-table-column prop="Specifications" sortable label="物料规格型号"></el-table-column>
            <el-table-column prop="DeliveryDate" sortable label="交货日期"></el-table-column>
            <el-table-column prop="ReMark" sortable label="备注"></el-table-column>
            <el-table-column prop="CustomerCode" sortable label="客户代码"></el-table-column>
            <el-table-column prop="CustomerName" sortable label="客户名称"></el-table-column>

            <el-table-column prop="OrderStatus" sortable label="订单状态"></el-table-column>
            <el-table-column prop="EnterUser" sortable label="录入人工号"></el-table-column>
            <el-table-column prop="EnterUserName" sortable label="录入人姓名"></el-table-column>
            <el-table-column prop="ReViewUser" sortable label="审核人工号"></el-table-column>
            <el-table-column prop="ReViewUserName" sortable label="审核人姓名"></el-table-column>
            <el-table-column prop="ReViewDate" sortable label="审核日期"></el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="block" style="text-align: right;padding: 4% 1% 0 0">       <!-- , jumper 加到layout里面 前往第 几 页     -->
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-size="PageCount"
                           :page-sizes="[10, 20, 30, 40,50]"
                           :current-page="CurrentPage" layout="total,sizes, prev, pager, next"
                           :total="Total">
            </el-pagination>
        </div>

    </div>
</template>


<script type="text/javascript">
    export default {
        data (){
            return {
                //    表格
                tableData: [],
                //   按条件 查询
                CustomerCode:'',
                OrderNumber: '',
                //     分页
                PageCount: 10,    // 每页几条   page-size
                CurrentPage: 1,   // 当前是第几页
                Total: 0,    // 总数

                labelPosition: 'right',
            }
        },
        methods: {
//            消息通知框
            openSuccess() {
                this.$notify({
//                    title: '成功',
                    message: this.info,
                    type: 'success'
                });
            },
            openError() {
                this.$notify.error({
//                    title: '错误',
                    message: this.info
                });
            },

            //    分页
            handleSizeChange(val) {
                this.PageCount = val;   //  每页几条
                this.selectTable();
            },
            handleCurrentChange(val) {
                this.CurrentPage = val;   // 当前是第几页
                this.selectTable();     //  点击分页的时候
            },
            //查询库位信息
            selectTable(){    // 校验输入信息正确性 ，不对直接  return
                let url;
                this.CustomerCode = this.CustomerCode.trim();  // 去掉用户输入的前后空格
                this.OrderNumber = this.OrderNumber.trim();
//                RepositoryNum   MaterielNum   PageCount  CurrentPage
                    url = "http://192.168.3.238:8088/OrderManager/GetOrderReportPage?CustomerCode=" + this.CustomerCode + "&OrderNumber=" + this.OrderNumber + "&PageCount=" + this.PageCount + "&CurrentPage=" + this.CurrentPage;
                    this.$http.get(url,).then(response => {
                    this.tableData = [];
                    let Code = response.data.Code;
                    if (Code == 200) {   // 正常请求到数据
                        this.Total = response.data.Total;
                        console.log(response.data);
                        for (let i = 0; i < response.data.ObjList.length; i++) {
                            this.tableData.push(response.data.ObjList[i]);
                            response.data.ObjList[i].index = i + 1;
                        }
                        console.log(this.tableData);
                        console.log("销售订单表格");
                        this.info='查询成功!';
                        this.openSuccess();

                    }
                }, response => {
                    console.log(" 销售表格查询显示失败");
                    console.log(response);
                        this.info='查询失败！';
                        this.openError();
                })
            },

        },
        mounted :function () {   //  onload
            this.selectTable();
        }
    }

</script>

<style>
    * {
        padding: 0;
    }

    html,
    body {
        height: 100%;
        width: 100%;
        overflow: hidden;
        margin: 0;
    }

    /* 表头数据居中 */
    .table_station thead tr th {
        text-align: center;
    }

</style>
